<template>
         <div v-if="music !== ''" class="mv">
             <span class="iconfont icon-fangxianganniu2 back" @click="$router.go(-1)"></span>
          <ul>
            <li v-for="ele in music" :key="ele.id"  @click="songid(ele.id)" >
              <div class="imgbox">
                <img :src="ele.al.picUrl" alt="" />
              </div>
              <h3>{{ ele.name }}</h3>
            </li>
          </ul>
        </div>
</template>

<script>
import { getlovemusic, getSongDetail} from '../api/lovemusic'
export default {
  data() {
    return {
      music:''
    }
  },
//   methods:{songid(id){
//     this.$router.push({
//       name:"ranklist",
//       query:{
//         id:id
//       }
//     })
//   }},
  methods: {
    songid(id) {
  this.$emit("get-player-id", id)//调用APP回调传递歌单单曲id
  }
  },
async   created(){
     let id=await JSON.parse(localStorage.getItem('uid'));
     let musicid =(await  getlovemusic(id)).ids;
    
    let getsong =musicid.join(",");
    console.log(getsong);
     this.music=(await getSongDetail(getsong)).songs     
  },
}
</script>

<style lang="less" scoped>
.mv {
  padding: 40px 16px 0 16px;
  position: relative;
        span {
        position: absolute;
        top: 10px;
        left: 8px;
        font-size: 16px;
      }
  li {
    display: flex;
    margin-bottom: 10px;
    .imgbox {
      position: relative;
      width: 152px;
      height: 86px;
      margin-right: 10px;
      border-radius: 8px;
      overflow: hidden;
      span {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: #fff;
        font-size: 12px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    h3 {
      width: 172px;
      font-size: 14px;
      padding: 20px 0;
      font-weight: 700;
    }
  }
}
</style>